<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="author" content="wangbo">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dom</title>
  <style>
    h1.red {
      border: 1px solid #ccc;
    }
  </style>
</head>

<body>
  <h1 name="dom" id="h1">我是h1
    <p>我是p的问题笨</p>
    <a href="">我是a的</a>
  </h1>
  <a class="red" name="dom" href="#">我是a</a>
  <!-- dom document object model -->
  <script>
    let myh1 = document.getElementById("h1");


    // 获取标签的文本
    let text = myh1.innerText;
    console.log(text)
    // myh1.style.color ="red"
    // 里边的标签会被文本元素覆盖掉
    // myh1.innerText = "重写的文本";
    // 既有文本,又有标签
    let myhtml = myh1.innerHTML;
    console.log(myhtml)
    myh1.innerHTML = "<b>我是b标签</b>"
    let age = 3;
    setTimeout(() => {
      myh1.innerHTML = `${age}秒钟会变`
    }, 3000);

    setTimeout(() => {
      age = 20
    }, 5000);
  </script>
</body>

</html>